<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>01_元素内容操作</title>
		<!-- 01_元素内容操作：元素以及元素内容的部分
		 .html()             无参---功能：获取匹配元素中第一元素的内容
		                     有参---功能：【设置】将匹配元素集合中所有元素替换为新元素
							 特点：针对   内容    +元素 
		 .val()              无参---功能：表单内元素：input、select生效
		                                 获取表单元素中第一元素的内容
		                     有参---功能：【设置】表单内元素：input、select生效
							                          input元素直接显示  value
													  select元素不是直接显示value
													  option 元素中value值
													  必须当前select中，option元素value值
													  直接赋值  ：打印select元素对象名称【object Object】
							 特点：针对  （表单内form元素可以包裹）元素的内容
		 .text()               无参--功能
		                        有参--功能
		 -->
		 <script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<h1>html()函数使用</h1>
		<button>按钮-针对html()函数-有参</button>
		<span>lorem1</span>
		<span>lorem2</span>
		<h1>val()函数使用</h1>
		<button>按钮-针对val()函数-无参</button>
		<input type="text" value="文本框真实 的数据" >
		<input type="text" placeholder="输入框显示效果[提示]" >
		<!-- html：按钮  |  下拉列表  select>option*3 需要加入value -->
		<!-- jq：  点击按钮，设置下拉列表的值  |  html()与val()有参是否存在区别 -->
		<button>按钮-针对val()函数-有参</button>
		<select>
			<option value="rem1">lorem1</option>
			<option value="rem2">lorem2</option>
			<option value="rem3">lorem3</option>
		</select>
		<h1>text()函数使用</h1>
		<button class="btn1">按钮-针对val()函数-无参</button>
		<button class="btn2">按钮-针对val()函数-有参</button>
		<p>lorem5</p>
		<p>lorem6</p>
		<p>lorem7</p>
		<script>
			//1.找到类名为  btn1的按钮  --点击--弹窗内容 三个 p  元素内容、
			$(".btn1").click(function(){
				var ptext=$("p").text();
				alert(ptext);
			});
			//2.找到 类名为 btn2的按钮  --点击--lorem4、5、6改成  修改文本
				$(".btn1").click(function(){
						$("p").text("修改文本");
						});
		
		
		
			
			
			$("button").click(function(){
				//抓下拉列表的value值---select
				//设置元素第一个的值   1.直接设置下拉列表中value的值
				$("select").val("rem1");
				//设置元素第一个的值   2.给第一个值添加设置的内容【本身存在】
				var rem=$("select").val();
				//object Object  JavaScript中，对象的默认字符串表示形态
				//select元素   对象  输出   ‘[object  Object]
				
				//value的值：真实数据  option中值：显示数据
				//object Object   测试：无参
				alert("val()函数有参："+rem)
			});
			
			
			
			
			
			// 动态效果：点击按钮，获取第一个表单元素的内容，元素打印出来
			// $("button").click(function(){
			// 	/* 注意：js变量名不可以为关键字！    in是关键字 */
			// 	var in=$("input").val();
			// 	alert("val()函数无参："+ins)
			// });
			
			
			
			
			// 有参 ：点击按钮--下面两个span   改成 lorem lorem
			// $("button").click(function(){
			// 	$("span").html("<span>lorem</span>")
			// });
			
			
			
			// js变量【var i=1】==jq变量     var  变量名=值、元素
			// 无参数      html()函数使用
			// var html=$("span").html();
			// // BOM方式  打印数据
			// alert("无参数获取第一个元素内容："+html);
		</script>
	</body>
</html>